<template>
    <div class="login">
        <div class="login-from">
            <div class="title text_center">
                <img src="../../assets/login_logo.png" alt />
                <div>二十万用户的选择</div>
            </div>
            <el-form ref="form" :model="form" :rules="rules" class="flex_column">
                <el-form-item prop="mobile">
                    <div class="flex_row align_items_center justify_content_center">
                        <!-- <i class="el-icon-mobile-phone" style="font-size:22px;"></i> -->
                        <img src="../../assets/man.png" style="margin-right:10px;" alt />
                        <el-input
                            v-model="form.mobile"
                            placeholder="请输入账号"
                            style="width:40%;border-radius:20px;"
                        ></el-input>
                    </div>
                </el-form-item>
                <el-form-item prop="password">
                    <div class="flex_row align_items_center justify_content_center">
                        <!-- <i class="el-icon-lock" style="font-size:22px;"></i> -->
                        <img src="../../assets/key.png" style="margin-right:10px;" alt />
                        <el-input
                            v-model="form.password"
                            type="password"
                            placeholder="请输入密码"
                            style="width:40%;"
                        ></el-input>
                    </div>
                </el-form-item>
                <el-form-item style="height:30px;width:100%;">
                    <div class="flex_row align_items_center" style="width:44%;margin:0 auto;">
                        <div style="width:44%;">
                            <el-switch
                                v-model="rememberVal"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                            ></el-switch>
                            <span style="margin-left:10px;">记住密码</span>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item class="flex_row justify_content_center">
                    <el-button type="primary" @click="onSubmit('form')" class="login-btn" :loading="loading">登 录</el-button>
                </el-form-item>
            </el-form>
            <div class="tips text_center">香港老六+澳门老六+泰国三合+新加坡乐合+新加坡天天彩+台湾大乐透+CC天天=5000元/年</div>
        </div>
    </div>
</template>

<script>
// 引入base64
const Base64 = require("js-base64").Base64;
export default {
    props: {},
    data() {
        return {
            form: {
                mobile: "",
                password: ""
            },
            rules: {
                mobile: [
                    {
                        required: true,
                        message: "请输入账号",
                        trigger: "blur"
                    }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ]
            },
            rememberVal: true,
            loading:false
        };
    },
    computed: {},
    created() {
        // 在页面加载时从cookie获取登录信息
        let account = this.getCookie("account");
        let password = Base64.decode(this.getCookie("password"));
        // 如果存在赋值给表单，并且将记住密码勾选
        if (account != "" && password != "") {
            this.form.mobile = account;
            this.form.password = password;
            this.rememberVal = true;
        }
    },
    mounted() {},
    watch: {},
    methods: {
        // 储存表单信息
        setUserInfo() {
            // 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息，
            // 如果没有勾选，储存的信息为空
            if (this.rememberVal) {
                this.setCookie("account", this.form.mobile);
                // base64加密密码
                let passWord = Base64.encode(this.form.password);
                this.setCookie("password", passWord);
            } else {
                this.setCookie("account", "");
                this.setCookie("password", "");
            }
        },
        onSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.loading = !this.loading
                    this.webLogin();
                } else {
                    //console.log('error submit!!');
                    return false;
                }
            });
        },
        webLogin() {
            let codeStr = `account=${this.form.mobile}&pwd=${this.form.password}`;
            // 加密参数
            this.$getCode(codeStr)
                .then(rsaCode => {
                    // 登录
                    this.http
                        .webLogin(rsaCode)
                        .then(res => {
                            this.$message.closeAll();
                            this.loading = !this.loading
                            if (res.data.errno === "000") {
                                this.$message({
                                    type: "success",
                                    message: "登录成功!"
                                });
                                if (this.rememberVal) {
                                    this.setUserInfo();
                                    // let codeStr = `account=${this.form.mobile}&pwd=${this.form.password}`;
                                    // this.$getCode(codeStr).then(code => {
                                    //     localStorage.setItem("code", code);
                                    // });
                                } else {
                                    this.setCookie("account", "");
                                    this.setCookie("password", "");
                                }
                                sessionStorage.setItem(
                                    "token",
                                    res.data.result.data.auth
                                );
                                sessionStorage.setItem(
                                    "u",
                                    res.data.result.data.uuid
                                );
                                sessionStorage.setItem(
                                    "level",
                                    res.data.result.data.level
                                );
                                sessionStorage.setItem(
                                    "grade_expire_time",
                                    res.data.result.data.grade_expire_time
                                );
                                sessionStorage.setItem(
                                    "id",
                                    res.data.result.data.id
                                );
                                // this.$store.commit('Member/pushCollects',res.data.result.data.id)
                                // console.log(this.$store.state.Member)
                                this.$router.push({
                                    path: "/index"
                                });
                            } else {
                                this.$message({
                                    type: "error",
                                    message: res.data.errmsg
                                });
                            }
                            // //console.log(res.data);
                        })
                        .catch(err => {
                            console.log(err);
                        });
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // 获取cookie
        getCookie(key) {
            if (document.cookie.length > 0) {
                var start = document.cookie.indexOf(key + "=");
                if (start !== -1) {
                    start = start + key.length + 1;
                    var end = document.cookie.indexOf(";", start);
                    if (end === -1) end = document.cookie.length;
                    return unescape(document.cookie.substring(start, end));
                }
            }
            return "";
        },
        // 保存cookie
        setCookie(cName, value, expiredays) {
            var exdate = new Date();
            exdate.setDate(exdate.getDate() + expiredays);
            document.cookie =
                cName +
                "=" +
                decodeURIComponent(value) +
                (expiredays == null ? "" : ";expires=" + exdate.toGMTString());
        }
    },
    components: {}
};
</script>

<style scoped lang="less">
@import url("./index.less");
</style>

<style>
.el-form-item__error {
    width: 43%;
    /* margin: 0 auto; */
    text-align: left;
    left: 55% !important;
    transform: translate(-50%, 0);
}
.login-from input.el-input__inner {
    border-radius: 24px !important;
}
</style>
